<template>
  <el-row :gutter="20">
        <el-col :span="4">
            <div class="nav">
                <div class="title">套餐类型列表</div>
                <div class="tree">
                    <treeUser @sendTreeData="sendTreeData"></treeUser>
                </div>
            </div>
        </el-col>
        <el-col :span="20">
            <div class="wrapper">
                <div class="myTitle"  v-if="this.$route.params.type=='add'">套餐添加</div>
                <div class="myTitle"  v-if="this.$route.params.type=='look'">套餐详情</div>
                <div class="myTitle"  v-if="this.$route.params.type=='update'">套餐更新</div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="所属分类" prop="category">
                        <span>{{ ruleForm.category }}</span>
                    </el-form-item>
                    <el-form-item label="套餐名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="套餐价格" prop="price">
                        <el-input v-model="ruleForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="上传图片" prop="image">
                        <UploadImg @sendImg="sendImg"></UploadImg>
                    </el-form-item>
                    <el-form-item label="套餐菜品" prop="dishes">
                        <div class="dishes">
                            <div class="dishButton">
                                <el-button type="warning" icon="el-icon-plus"
                                @click="addDish" v-if="this.$route.params.type=='update'||this.$route.params.type=='add'"
                                >添加菜品</el-button>
                            </div>
                            <el-dialog title="添加菜品" :visible.sync="dialogVisible">
                                <div class="tabs">
                                    <el-tabs tab-position="left" style="height: 600px;" @tab-click="changeTab">
                                        <el-tab-pane v-for="(category,index) in categoryList" :key="index" :label="category.name">
                                            <div class="allDishes">
                                                <el-table
                                                    ref="multipleTable"
                                                    @select="selectHandle"
                                                    @select-all="selectHandle"
                                                    :data="dishData"
                                                    border
                                                    style="width: 100%">
                                                    <el-table-column
                                                    align="center"
                                                    type="selection"
                                                    width="55">
                                                        </el-table-column>
                                                    <el-table-column
                                                    align="center"
                                                    prop="name"
                                                    label="菜品名称"
                                                    width="100">
                                                    </el-table-column>
                                                    <el-table-column
                                                    align="center"
                                                    prop="status"
                                                    label="状态"
                                                    width="100">
                                                    <template slot-scope="scope">
                                                        <span v-if="scope.row.status==0">
                                                            停售
                                                        </span>
                                                        <span v-else>
                                                            起售
                                                        </span>
                                                    </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                    align="center"
                                                    prop="price"
                                                    label="价格"
                                                    width="100">
                                                    </el-table-column>
                                                </el-table>
                                            </div>
                                            <div class="selectDishes">
                                                <el-card :body-style="{margin:'10px'}">
                                                    <div slot="header">
                                                        <span>已选菜品</span>
                                                    </div>
                                                    <div v-for="(data,index) in moreData" :key="index" class="dataContainer">
                                                        <el-card :body-style="{padding:'10px'}">
                                                            <div class="dataContent">
                                                                <div class="info">
                                                                    <div class="name">
                                                                        {{ data.name }}
                                                                    </div>
                                                                    <div class="price">
                                                                        ￥{{ data.price }}
                                                                    </div>
                                                                </div>
                                                                <div class="delete" @click="deleteDish(index)">
                                                                    <i class="el-icon-circle-close"></i>
                                                                </div>
                                                            </div>
                                                        </el-card>
                                                    </div>
                                                </el-card>
                                            </div>
                                        </el-tab-pane>
                                    </el-tabs>
                                </div>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="addDishConfirm">添加</el-button>
                                </span>
                            </el-dialog>
                            <div class="tableContainer">
                                <el-table
                                    :data="tableData"
                                    style="width: 100%">
                                    <el-table-column
                                    align="center"
                                        prop="name"
                                        label="菜品名称"
                                        width="180">
                                    </el-table-column>
                                    <el-table-column
                                    align="center"
                                        prop="price"
                                        label="原价"
                                        width="180">
                                    </el-table-column>
                                    <el-table-column
                                    align="center"
                                        prop="num"
                                        label="份数">
                                        <template slot-scope="scope">
                                            <el-input-number
                                            :disabled="ifDisabled()"
                                            v-model="scope.row.copies"
                                            ></el-input-number>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        align="center"
                                        prop="operate"
                                        label="操作">
                                        <template slot-scope="scope">
                                            <el-button
                                                :disabled="ifDisabled()"
                                                icon="el-icon-delete"
                                                size="mini"
                                                type="danger"
                                                @click="handleDelete(scope.$index, scope.row)"
                                            >删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="套餐描述" prop="description">
                        <WangEditor :content="this.ruleForm.descs" ref="wangEditor"></WangEditor>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="closePage" v-if="this.$route.params.type=='look'">返回</el-button>
                        <div v-else>
                            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                            <el-button @click="closePage">取消</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import treeUser from './treeUser.vue'
import UploadImg from './upLoadImg.vue'
import WangEditor from './wangEditor.vue'
import axios from 'axios' 
export default {
    components:{
        treeUser,UploadImg,WangEditor
    },
    data() {
        return {
            seeInfo:'',
            dialogVisible:false,
            categoryList:[],
            ruleForm: {
                category:'',
                descs:''
            },
            categoryId:'',
            rules: {
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '请输入套餐名', trigger: 'change' }
                ],
                price: [
                    { required: true, message: '请输入套餐价格', trigger: 'change' }
                ],
                category: [
                    { required: true, message: '请选择套餐的分类', trigger: 'change' }
                ],
            },
            tableData: [],
            moreData:[],
            dishData:[]
        };
    },
    created(){
        if(this.$route.params.type=='update'||this.$route.params.type=='look'){
            axios({
                url:`http://localhost:8080/kfc/admin/setmeal/get?id=${this.$route.params.id}`,
                method:'get',
                headers:{
                    token:localStorage.getItem('jwt')
                },
            }).then(res=>{
                this.ruleForm=Object.assign(res.data.data,this.ruleForm)
                this.ruleForm.isShow=true
                this.ruleForm.category=this.ruleForm.categoryName
                this.tableData=this.ruleForm.setmealDishes
                this.moreData=this.ruleForm.setmealDishes
                this.$nextTick(() => {
                    this.$refs.wangEditor.html = this.ruleForm.description;
                })
                this.$bus.emit('sendUrl',this.ruleForm.image)
                this.categoryId=this.ruleForm.categoryId
            })
        }
        axios({
            url:`http://localhost:8080/kfc/admin/category/list?type=1`,
            method:'get',
            headers:{
                token:localStorage.getItem('jwt')
            },
        }).then(res=>{
            this.categoryList=res.data.data
            axios({
                url:`http://localhost:8080/kfc/admin/dish/list?categoryId=${this.categoryList[0].id}`,
                method:'get',
                headers:{
                    token:localStorage.getItem('jwt')
                },
            }).then(res=>{
                this.dishData=[]
                for(let i=0;i<res.data.data.length;i++){
                    if(res.data.data[i].status==1){
                        this.dishData.push(res.data.data[i])
                    }
                }
            })
        })
        this.$bus.on('sendHtml',(val)=>{
            let str=val.split("<p>")
            str=str[1]
            str=str.split("</p>")
            str=str[0]
            this.ruleForm.descs=str
        })
        // if(this.$route.params.userInfo){
        //     this.seeInfo=this.$route.params.userInfo
        //     this.ruleForm.username=this.seeInfo.username
        //     this.ruleForm.phone=this.seeInfo.phone
        //     this.ruleForm.name=this.seeInfo.name
        //     this.ruleForm.image=this.seeInfo.image
        //     this.ruleForm.symptoms=this.seeInfo.symptoms
        // }
    },
    methods:{
        comparaDish(index){
            this.$refs.multipleTable[index].clearSelection();
            for(let i=0;i<this.moreData.length;i++){
                for(let j=0;j<this.dishData.length;j++){
                    if(this.moreData[i].name==this.dishData[j].name){
                        //this.$refs.multipleTable[0].toggleRowSelection(j)
                        this.$refs.multipleTable[index].toggleRowSelection(this.dishData[j],true)
                    }
                }
            }
        },
        sendImg(val){
            this.ruleForm.image=val
        },
        makeDishTrue(){
            this.dialogVisible=true
        },
        ifDisabled(){
            if(this.$route.params.type=='look'){
                return true
            }
        },
        async addDish(){
            await this.makeDishTrue()
            this.comparaDish(0)
        },
        async deleteDish(index){
            await this.moreData.splice(index,1)
            this.comparaDish(localStorage.getItem('item'))
        },
        selectHandle(selection){
            let tableSelectData={}
            console.log(selection);
            for(let i=0;i<selection.length;i++){
                tableSelectData.copies=1
                tableSelectData.dishId=selection[i].id
                tableSelectData.name=selection[i].name
                tableSelectData.price=selection[i].price
                tableSelectData.id=null
                if(this.$route.params.type=='add'){
                    tableSelectData.setmealId=null
                }
                else{
                    tableSelectData.setmealId=this.moreData[0].setmealId
                }
                this.moreData.push(tableSelectData)
                console.log(this.moreData);
            }
            let map=new Map()
            this.moreData.forEach((item)=>{
                if(!map.has(item.name)){
                    map.set(item.name,item)
                }
            })
            this.moreData=[...map.values()]
        },
        async changeTab(value){
            for(let i=0;i<this.categoryList.length;i++){
                if(this.categoryList[i].name==value.label){
                    localStorage.setItem('item',i)
                    await axios({
                        url:`http://localhost:8080/kfc/admin/dish/list?categoryId=${this.categoryList[i].id}`,
                        method:'get',
                        headers:{
                            token:localStorage.getItem('jwt')
                        },
                    }).then(res=>{
                        this.dishData=[]
                        for(let i=0;i<res.data.data.length;i++){
                            if(res.data.data[i].status==1){
                                this.dishData.push(res.data.data[i])
                            }
                        }
                    })
                    this.comparaDish(i)
                }
            }
        },
        closePage(){
            this.$router.push('/user/list')
        },
        addDishConfirm(){
            this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success'
            })
            this.dialogVisible = false
            this.tableData=this.moreData
        },
        submitForm(forName){
            this.$refs[forName].validate((valid)=>{
                if(valid){
                    if(this.$route.params.type=='update'){
                        axios({
                            url:'http://localhost:8080/kfc/admin/setmeal',
                            method:'put',
                            headers:{
                                token:localStorage.getItem('jwt')
                            },
                            data:{
                                categoryId:this.categoryId,
                                id:this.ruleForm.id,
                                name:this.ruleForm.name,
                                price:this.ruleForm.price,
                                description:this.ruleForm.descs,
                                setmealDishes:this.tableData,
                                image:this.ruleForm.image,
                            }
                        })
                        this.$message({
                            type:'success',
                            message:'修改成功'
                        })
                    }
                    else{
                        axios({
                            url:'http://localhost:8080/kfc/admin/setmeal/add',
                            method:'post',
                            headers:{
                                token:localStorage.getItem('jwt')
                            },
                            data:{
                                categoryId:this.categoryId,
                                name:this.ruleForm.name,
                                price:this.ruleForm.price,
                                description:this.ruleForm.descs,
                                image:this.ruleForm.image,
                                setmealDishes:this.tableData,
                            }
                        })
                        this.$message({
                            type:'success',
                            message:'添加成功'
                        })
                    }
                    setTimeout(()=>{
                        this.$router.push({
                            name:'userList'
                        })
                    },1000)
                }
                else{
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        resetForm(forName){
            this.$refs[forName].resetFields()
        },
        handleDelete(index){
            this.tableData.splice(index,1)
        },
        sendTreeData(val) {
            //存储接受的tree的数据 val={id:,cid:,name:''}
            // console.log(val.label);
            this.ruleForm.category = val.label
            this.categoryId=val.value
        },
    }
}
</script>

<style lang="less" scoped>
.nav{
    height: 600px;
    background: #FFF;
    .title {
        background: skyblue;
        padding: 20px;
        color: #fff;
    }
    .tree{
        padding: 20px;
    }
}
.wrapper{
    background: #FFF;
    .myTitle {
        background: #eee;
        padding: 14px;
        color: #333;
        font-weight: bold;
        margin-bottom: 30px;
    }
    .demo-ruleForm{
        padding: 20px;
    }
}
.dishes{
    overflow: hidden;
    background-color: rgb(251,251,251);
    .tableContainer{
        margin: 20px;
    }
    .tabs{
        height: 600px;
        .allDishes{
            width: 355px;
            float: left;
        }
        .allDishes{
            height:600px;
        }
        .selectDishes{
            float: left;
            margin-left: 20px;
            width: 290px;
            height: 600px;
            .dataContainer{
                margin-bottom: 7px;
                .dataContent{
                display: flex;
                align-content: center;
                justify-content: space-between;
                .info{
                    display: flex;
                    align-items: center;
                    .price{
                        margin-left: 10px;
                    }
                }
            }
            }
        }
    }
    .dishButton{
        margin-top: 20px;
        margin-left: 20px;
    }
}
</style>